<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.staticfile.org/jquery/3.6.3/jquery.min.js"></script>
</head>

<body>
    <section class="all-lable">
        <!-- <ul>
            <li class="title">地区</li>
            <li class="active">全部</li>
            <li>大陆</li>
            <li>日本</li>
            <li>其他</li>
        </ul>
        <ul>
            <li class="title">地区</li>
            <li class="active">全部</li>
            <li>大陆</li>
            <li>日本</li>
            <li>其他</li>
        </ul> -->
    </section>
    <ul class="list"></ul>
    <script>
        // 默认值
        var query = {
            styleId: -1,
            areaId: -1,
            isFinish: -1,
            order: 0,
            pageNum: 1,
            pageSize: 39,
            isFree: -1,
        };
        // 封装创建函数
        function generateLabelList(name, list, key, value) {
            // 创建ul
            var $ulDom = $('<ul></ul>');
            // 渲染地区
            $ulDom.append('<li class="title">' + name + '</li>');
            $ulDom.append('<li class="active" data-key=' + key + ' data-value=' + value + '>全部</li>');
            list.forEach(function(ele, index) {
                $ulDom.append($('<li data-key=' + key + ' data-id=' + ele.id + '>' + ele.name + '</li>'))
            });
            // 添加ul
            $('.all-lable').append($ulDom);
        }

        // 获取数据
        $.get('https://apis.netstart.cn/bcomic/AllLabel', function(res) {

            generateLabelList('题材', res.data.styles, "styleId", -1);
            generateLabelList('地区', res.data.areas, "areaId", -1);
            generateLabelList('进度', res.data.status, "isFinish", -1);
            generateLabelList('收费', res.data.prices, "isFree", -1);
            generateLabelList('排序', res.data.orders, "order", 0);
            // console.log(res.data);
            // 默认初始
            $.get('https://apis.netstart.cn/bcomic/ClassPage', query, function(res) {
                // 遍历列表
                res.data.forEach(function(element, index) {
                    if (element.is_finish == 1) {
                        $('.list').append('<li><img src=' + element.vertical_cover + '><a href="javascrpit:;">' + element.title + '</a><p>[完结] 共 ' + element.last_ord + ' 话</p></li>');
                    } else {
                        $('.list').append('<li><img src=' + element.vertical_cover + '><a href="javascrpit:;">' + element.title + '</a><p>更新至 ' + element.last_ord + ' 话</p></li>')
                    }
                });

            });
            // 绑定点击事件
            $('.all-lable ul li').click(function() {
                // console.log($(this).data('key'));
                // console.log($(this).data('id'));
                query[$(this).data('key')] = $(this).data('id');

                $(this).addClass('active').siblings().removeClass('active');
                // 删除之前的列表
                $('.list').html('');
                // 获取列表
                $.get('https://apis.netstart.cn/bcomic/ClassPage', query, function(res) {
                    // 遍历列表

                    res.data.forEach(function(element, index) {
                        if (element.is_finish == 1) {
                            $('.list').append('<li><img src=' + element.vertical_cover + '><a href="javascrpit:;">' + element.title + '</a><p>[完结] 共 ' + element.last_ord + ' 话</p></li>');
                        } else {
                            $('.list').append('<li><img src=' + element.vertical_cover + '><a href="javascrpit:;">' + element.title + '</a><p>更新至 ' + element.last_ord + ' 话</p></li>')
                        }
                    });
                    console.log(res);
                })
            })
        })
    </script>
</body>

</html>